<template>
  <FormItem :label="l.label" v-for="l in mapOrderStatus" :key="l.value">
    <el-select
      multiple
      placeholder="请选择订单状态"
      v-model="settingForm.orderStatusSetting[l.value]"
      style="width: 100%"
      @change="handleChangeOrderStatus"
      @remove-tag="removeTag"
    >
      <el-option :style="{display: !checkedOrderIdList.includes(item.paramId) ? 'block' : 'none'}" v-for="item in orderStatusList" :key="item.paramId" :value="item.paramId" :label="item.paramValue"></el-option>
    </el-select>
  </FormItem>
</template>

<script>
// 这个功能最重要的是思维，其实代码量非常的少
export default {
  mounted() {
    // 这里通过接口获取到初始化的数据
    settingConf({ gid: this.$store.state.shop.shopId }).then((res) => {
        this.settingForm = {
          orderStatusSetting: res.data.orderStatusSetting
        }
        // 订单状态
        const { orderStatusSetting = {} } = res.data
        // 初始化时确认被选中的id
        this.checkedOrderIdList = orderStatusSetting.preSale.concat(orderStatusSetting.sale, orderStatusSetting.afterSale)
      })
  },
  methods: {
    handleChangeOrderStatus (status) { // 只有被选中的可能,选中的选项已经隐藏掉了
      this.checkedOrderIdList = Array.from(new Set([...this.checkedOrderIdList, ...status]))
    },
    removeTag (tag) { // 取消的处理
      this.checkedOrderIdList = this.checkedOrderIdList.filter(id => id !== tag)
    },
  }
}
</script>

